<template>
  <div class="content">
    <header>
      <p class="title">
        设置
      </p>
    </header>
    <section>
      <ul>
      	<li>区域管理员授权模式</li>
        <li class="label">
          <el-radio-group  v-model="data.region_auth_type" >
            <el-radio   :label="1">区域管理员只有授权和访问申请审批权力</el-radio>
            <el-radio  :label="2">区域管理员对本区域内门锁有锁管理员全部权力</el-radio>
          </el-radio-group>
        </li>
      </ul>
      <ul>
      	<li>申请审批模式</li>
        <li class="label">
          <el-radio-group  v-model="data.approval_type" >
            <el-radio   :label="1">普通员工审批终止</el-radio>
            <el-radio  :label="2">员工审批后需转区域管理审批终止</el-radio>
            <el-radio  :label="3">员工审批后需转锁管理员审批终止</el-radio>
          </el-radio-group>
        </li>
      </ul>
      <ul>
      	<li>授权模式</li>
        <li class="label">
          <el-radio-group  v-model="data.auth_type" >
            <el-radio   :label="1">只锁管理员可授权</el-radio>
            <el-radio  :label="2">区域管理可授权</el-radio>
            <el-radio  :label="3">普通员工可授权</el-radio>
          </el-radio-group>
        </li>
      </ul>
      <ul>
      	<li>密码默认有效时间</li>
        <li class="label">
          <el-radio-group class="time"  v-model="data.pwd_type" >
            <div>
             <el-radio   :label="1">10分钟</el-radio>
            <el-radio   :label="2">30分钟</el-radio>
            <el-radio   :label="3">1小时</el-radio>
            </div>
           <div>
            <el-radio   :label="4">2小时</el-radio>
           <el-radio   :label="5">三个小时</el-radio>
           <el-radio   :label="6">六个小时</el-radio>
           </div>
           <div>
            <el-radio   :label="7">十二小时</el-radio>
           <el-radio   :label="8">一天</el-radio>
           <el-radio   :label="9">三天</el-radio>
            <el-radio   :label="10">十天</el-radio>
           </div>
          </el-radio-group>
        </li>
      </ul>
      <ul class="btn">
      	<li></li>
        <li>
          <span @click='submit'>确定</span>
          <span>取消</span>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
  import {sys_config,config_post} from '@/js/getApi.js'
  export default{
    name:'setting',
    data(){
      return{
        data:{}
      }
    },
    methods:{
      submit(){
         config_post(this.$store.state.token,this.data.id,this.data.region_auth_type,this.data.approval_type,this.data.auth_type,this.data.pwd_type);
      }
    },
    async created() {
       const data=await sys_config(this.$store.state.token);
       this.data=data;
     }
  }
</script>

<style scoped>
  header{
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 84px;
    color: rgba(5, 5, 5, 100);
    font-size: 16px;
    font-family: SourceHanSansSC-regular;
    border-bottom: 1px solid #F7F7F7;
  }
  section{
    margin-top: 30px;
  }
  section ul{
    display: flex;
    margin-top:34px;
  }
  section ul li:nth-of-type(1){
    width: 117px;
    height: 44px;
    text-align: center;
    opacity: 0.8;
    color: rgba(0, 0, 0, 1);
    font-size: 15px;
    font-family: Roboto;
  }
  .label{
      margin-left:30px;
  }
  section ul li label{
    display: block;
  }
  .label label{
     margin-top: 13px;
   }
   .label label:nth-of-type(1){
      margin-top:0;
    }
.time{
  display: flex;
}

.btn{
  margin-top: 100px;
  margin-left: 30px;
}
.btn span{
  cursor: pointer;
}
.btn span:nth-of-type(1){
  display: inline-block;
  width: 100px;
  height: 34px;
  line-height:34px;
  border-radius: 2px;
  background-color: rgba(26, 188, 156, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
}
.btn span:nth-of-type(2){
  display: inline-block;
  width: 100px;
  height: 34px;
  line-height: 34px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 100);
  color: rgba(26, 188, 156, 100);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  border: 1px solid rgba(26, 188, 156, 100);
  margin-left: 20px;
}










</style>
